<!--下一步 1.机构 2管理员-->
<template>
  <ele-modal
    width="680px"
    title="弹窗示例"
    :visible="visible"
    :title="isUpdate ? '修改机构' : '添加机构'"
    @update:visible="updateVisible"
  >
    <div style="max-width: 700px; margin: 0 auto">
      <el-steps
        :active="active"
        class="ele-steps-horizontal"
        style="margin: 10px 0 45px 0"
      >
        <el-step title="第一步" description="填写转账信息" />
        <el-step title="第二步" description="确认转账信息" />
        <el-step title="第三步" description="转账成功" />
      </el-steps>
      <!-- 第一步 -->
      <step-edit v-if="active === 0" @done="onDone" />
      <!-- 第二步 -->
      <step-confirm
        v-if="active === 1"
        :data="form"
        @done="onNext"
        @back="onBack"
      />
      <!-- 第三步 -->
      <step-success v-if="active === 2" :data="form" @back="onBack" />
    </div>
  </ele-modal>
</template>

<script>
  import StepEdit from './step-edit.vue';
  import StepConfirm from './step-confirm.vue';
  import StepSuccess from './step-success.vue';

    export default {
      name: "area-step",
      components: {
        StepEdit,
        StepConfirm,
        StepSuccess
      },
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        // 上级id
        parentId: Number,
        // 机构数据
        organizationList: Array
      },
      data() {
        return {
          // 选中步骤
          active: 0,
          // 数据
          form: {}
        };
      },
      methods: {
        onDone(data) {
          Object.assign(this.form, data);
          this.active = 1;
        },
        onNext() {
          this.active = 2;
        },
        onBack() {
          this.active = 0;
        },
        /* 更新visible */
        updateVisible(value) {
          this.$emit('update:visible', value);
        }
      },
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data) {
              this.$util.assignObject(this.form, this.data);
              this.isUpdate = true;
            } else {
              this.form.parentId = this.parentId;
              this.isUpdate = false;
            }
          } else {
            this.$refs.form.clearValidate();
            this.form = { ...this.defaultForm };
          }
        }
      }
    }
</script>

<style scoped>

</style>
